
import { getData2 } from '../Data'
import { useReactive } from 'ahooks'
import { CollectionView } from '@grapecity/wijmo'

import { FlexGrid, FlexGridColumn } from '@grapecity/wijmo.react.grid'

const WijmoF03 = () => {
    const InitData = useReactive({
        countries: ['亚洲', '欧洲', '非洲', '大洋洲', '南极洲', '南美洲', '北美洲'],
        data: new CollectionView(getData2(100), {
            getError: (item, prop, parsing) => {
                if (parsing) {
                    switch (prop) {
                        case 'country':
                            return '请选择正确的类表内容';
                        case 'date':
                            return '请输入正确日期信息';
                        default:
                            return '请输入数字';
                    }
                }
                if (prop == 'sales' && item.sales < 0) {
                    return 'Sales cannot be negative!';
                }
                if (prop == 'expenses' && item.expenses < 0) {
                    return 'Expenses cannot be negative!';
                }
                return null;
            }
        })
    })


    return (
        <div className="Page">
            <FlexGrid itemsSource={InitData.data} >
                <FlexGridColumn binding="id" header="ID" isReadOnly={true} />
                <FlexGridColumn binding="country" header="Country" isRequired={true} dataMap={InitData.countries} />
                <FlexGridColumn binding="sales" header="Sales" />
                <FlexGridColumn binding="expenses" header="Expenses" />
                <FlexGridColumn binding="date" header="Date" isRequired={true} format="M/d/yyyy" />
                <FlexGridColumn binding="overdue" header="Overdue" />
            </FlexGrid>
        </div>
    );
};

export default WijmoF03;